<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>下单页面</title>
  <link rel="stylesheet" type="text/css" href="../res/static/css/main.css">
  <link rel="stylesheet" type="text/css" href="../res/layui/css/layui.css">
  <script type="text/javascript" src="../res/layui/layui.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
</head>
<body>

  <div class="site-nav-bg">
    <div class="site-nav w1200">
      <p class="sn-back-home">
        <i class="layui-icon layui-icon-home"></i>
        <a href="#">首页</a>
      </p>
      <div class="sn-quick-menu">
        <div class="login"><a href="login.html">登录</a></div>
        <div class="sp-cart"><a href="shopcart.html">购物车</a><span>2</span></div>
      </div>
    </div>
  </div>



  <div class="header">
    <div class="headerLayout w1200">
      <div class="headerCon">
        <h1 class="mallLogo">
          <a href="#" title="母婴商城">
            <img src="../res/static/img/logo.png">
          </a>
        </h1>
      </div>
    </div>
  </div>

      <div class=" w1200">
	      <h5><b>选择收货地址</b></h5>
	      <br />
	      <ul class="item-content">
	      	<li class="address-box"><p>广东广州 (周杰伦 收)</p><br/><p>天河 元岗 天源路 788号 183333333</p></li>
	      	<li class="address-box"><p>广东广州 (周杰伦 收)</p><br/><p>天河 元岗 天源路 788号 183333333</p></li>
	      	<li class="address-box"><p>广东广州 (周杰伦 收)</p><br/><p>天河 元岗 天源路 788号 183333333</p></li>
	      	<li class="address-box"><p>广东广州 (周杰伦 收)</p><br/><p>天河 元岗 天源路 788号 183333333</p></li>
	      </ul>
      </div>
      <div class="order-msg w1200 shopcart-content">
	      <h5><b>确认订单信息</b></h5>
	      <br />
	      <div class="order-top">
		      <div class="cart-table-th">
			       <div class="th th-item">
		          <div class="th-inner">
		            商品
		          </div>
		        </div>
		        <div class="th th-price">
		          <div class="th-inner">
		            单价
		          </div>
		        </div>
		        <div class="th th-amount">
		          <div class="th-inner">
		            数量
		          </div>
		        </div>
		        <div class="th th-sum">
		          <div class="th-inner">
		            小计
		          </div>
		        </div>
		      </div>
       </div>  
       <div class="order-content" id="list-cont">
          <ul class="item-content layui-clear">
            <li class="th th-item">
              <div class="item-cont">
                <a href="javascript:;"><img src="../res/static/img/paging_img1.jpg" alt=""></a>
                <div class="text">
                  <div class="title">宝宝T恤棉质小衫</div>
                  <p><span>粉色</span>  <span>130</span>cm</p>
                </div>
              </div>
            </li>
            <li class="th th-price">
              <span class="th-su">189.00</span>
            </li>
            <li class="th th-amount">
               <span class="th-su">1</span>
            </li>
            <li class="th th-sum">
              <span class="sum">189.00</span>
            </li>
          </ul>
          <ul class="item-content layui-clear itemContent">
            <li class="th th-item">
              <div class="item-cont">
                <a href="javascript:;"><img src="../res/static/img/paging_img1.jpg" alt=""></a>
                <div class="text">
                  <div class="title">宝宝T恤棉质小衫</div>
                  <p><span>粉色</span>  <span>130</span>cm</p>
                </div>
              </div>
            </li>
            <li class="th th-price">
              <span class="th-su">189.00</span>
            </li>
            <li class="th th-amount">
               <span class="th-su">1</span>
            </li>
            <li class="th th-sum">
              <span class="sum">189.00</span>
            </li>
          </ul>
          <ul class="item-content layui-clear">
            <li class="th th-item">
              <div class="item-cont">
                <a href="javascript:;"><img src="../res/static/img/paging_img1.jpg" alt=""></a>
                <div class="text">
                  <div class="title">宝宝T恤棉质小衫</div>
                  <p><span>粉色</span>  <span>130</span>cm</p>
                </div>
              </div>
            </li>
            <li class="th th-price">
              <span class="th-su">189.00</span>
            </li>
            <li class="th th-amount">
               <span class="th-su">1</span>
            </li>
            <li class="th th-sum">
              <span class="sum">189.00</span>
            </li>
          </ul>
        </div>
        <div class="FloatBarHolder layui-clear">
        <div class="th Settlement">
          <button class="layui-btn">提交订单</button>
        </div>
        <div class="th total">
          <p>应付：<span class="pieces-total">100</span></p>
        </div>
      </div>
        
      </div>
  <!-- 模版引擎导入 -->
  <!-- <script type="text/html" id="demo">
    {{# layui.each(d.listCont,function(index,item){}}
    <div class="item">
      <div class="img">
        <img src="../res/img/new1.jpg" alt="">
      </div>
      <div class="text">
        <h4>周岁内的宝宝消化不良拉肚子怎么办?</h4>
        <p class="data">2016-12-24 16:33:26</p>
        <p class="info-cont">宝宝在周岁之前体质相对较弱，特别是薄弱肠道，一不注意就会拉肚子;那么宝宝消化不良拉肚子</p>
      </div>
    </div>
    {{# })}}
  </script> -->
<script>
  layui.config({
    base: '../res/static/js/util/' //你存放新模块的目录，注意，不是layui的模块目录
  }).use(['mm','laypage'],function(){
  	var mm = layui.mm,$ = layui.$,element = layui.element
    // 模版引擎导入
     // var html = demo.innerHTML;
     // var listCont = document.getElementById('list-cont');
     //  mm.request({
     //    url: '../json/information.json',
     //    success : function(res){
     //      console.log(res)
     //      listCont.innerHTML = mm.renderHtml(html,res)
     //    },
     //    error: function(res){
     //      console.log(res);
     //    }
     //  })   
     
     //选择地址
$(".address-box").click(function(e){
	$(".address-box").removeClass("onclick-color")
	$(this).addClass("onclick-color")
})
});


</script>
</body>
</html>